<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/1/5
  Time: 20:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<style>

</style>
<body>
    <div id="selectBook">
        书本编号:<input type="text" name="getBookNum">
        书名:<input type="text" name="getBookName">
        作者:<input type="text" name="getBookWriter">
        类型:<input type="text" name="getBookType">
        <button class="selected">查找</button>
    </div>
<table border="1px" style="able-layout:fixed;" id="myTable">
    <thead>
    <tr>
        <th>
            书包编号
        </th>
        <th>
            书名
        </th>
        <th>
            作者
        </th>
        <th>
            类型
        </th>
        <th>
            价格
        </th>
        <th>
            库存
        </th>
        <th>
            操作
        </th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${books}" var="book">
        <tr>
            <td class="bookId" style="display: none">${book.bookId}</td>
            <td class="bookNum">${book.bookNum}</td>
            <td class="bookName">${book.bookName}</td>
            <td class="bookWriter">${book.bookWriter}</td>
            <td class="bookType">${book.bookType}</td>
            <td class="bookPrice">${book.bookPrice}</td>
            <td class="bookPrice">${book.bookIn}</td>
            <td>
                <input class='updateBook' type='submit' value='修改'>
                <input class='deleteBook' type='submit' value='删除'>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="7">
            <c:if test="${pageInfo.isFirstPage == false}">
                <button class="firstPage">首页</button>
            </c:if>
            <c:if test="${pageInfo.hasPreviousPage == true}">
                <button class="previous">上一页</button>
            </c:if>
            <c:forEach var="num" begin="1" end="${pageInfo.pages}">
                <button class="pager">${num}</button>
            </c:forEach>
            <c:if test="${pageInfo.hasNextPage == true}">
                <button class="next">下一页</button>
            </c:if>
            <c:if test="${pageInfo.isLastPage == false}">
                <button class="isLastPage">尾页</button>
            </c:if>
        </td>
    </tr>
    </tbody>
</table>
    <button id="addBook">添加</button>
</body>
<script src="js/jq.js"></script>
<script>

    $(document).on("click",".selected",function () {
        loadBooks();
    })

    $(document).on("click",".next",function () {
        console.log($(this)+1);
        console.log($(this).text())
        $.ajax({
            url: "getSomeBooks",
            type: "POST",
            data: {
                page:$(this).text()+1,
                limit:5
            },
            dataType: "json",
            success: function (data) {
                $("tbody tr").remove();
                creatTable(data.books);
            }
        });
    })

    $(document).on("click",".previous",function () {
        console.log($(this).text())
        $.ajax({
            url: "getSomeBooks",
            type: "POST",
            data: {
                page:$(this).text()-1,
                limit:5
            },
            dataType: "json",
            success: function (data) {
                $("tbody tr").remove();
                creatTable(data.books);
            }
        });
    })

    $(document).on("click",".pager",function () {
        console.log($(this).text())
        $.ajax({
            url: "getSomeBooks",
            type: "POST",
            data: {
                page:$(this).text(),
                limit:5
            },
            dataType: "json",
            success: function (data) {
                $("tbody tr").remove();
                creatTable(data.books);
            }
        });
    })

    //添加
    $("#addBook").click(function () {
        let newRow = $("<tr>")
        newRow.append($("<td>").append($("<input type='text' id='newBookNum' style='width:100%'>")));
        newRow.append($("<td>").append($("<input type='text' id='newBookName' style='width:100%'>")));
        newRow.append($("<td>").append($("<input type='text' id='newBookWriter' style='width:100%'>")));
        newRow.append($("<td>").append($("<input type='text' id='newBookPrice' style='width:100%'>")));
        newRow.append($("<td>").append($("<input type='text' id='newBookIn' style='width:100%'>")));
        newRow.append($("<td>").append($("<input type='text' id='newBookType' style='width:100%'>")));
        newRow.append($("<input class='sure' type='submit' value='确定'>"),$("<input class='cancel' type='submit' value='取消'>"));
        $("#myTable").append(newRow);
    })

    $(document).on("click",".sure",function() {
        $.ajax({
            url:"addBook",
            type:"POST",
            data:JSON.stringify({
                "bookName":$('#newBookName').val(),
                "bookType":$('#newBookType').val(),
                "bookWriter":$('#newBookWriter').val(),
                "bookPrice":$('#newBookPrice').val(),
                "bookNum":$('#newBookNum').val(),
                "bookIn":$('#newBookIn').val(),
                "page":"1",
                "limit":"5",
            }),
            contentType:"application/json",
            success:function(data) {
                $("tbody tr").remove();
                creatTable(data.books);
                creatPage(data.page);
            }
        })
    })


    //删除
    $(document).on("click",".deleteBook",function(){
        $.ajax({
            url:"delete",
            type:"POST",
            data:JSON.stringify({
                "page":"1",
                "limit":"5",
                "bookId":$(this).closest("tr").find(".bookId").text()
            }),
            contentType:"application/json",
            success:function(data) {
                $("tbody tr").remove();
                creatTable(data.books);
                creatPage(data.page);
            }
        })
    })


    //查找
    function loadBooks(){
        console.log($('#selectBook input[name="getBookNum"]').val())
        $.ajax({
            url: "getSomeBooks",
            type: "POST",
            data: {
                bookNum:$('#selectBook input[name="getBookNum"]').val(),
                bookName: $('#selectBook input[name="getBookName"]').val(),
                bookType: $('#selectBook input[name="getBookType"]').val(),
                bookWriter: $('#selectBook input[name="getBookWriter"]').val(),
                page:1,
                limit:5
            },
            dataType: "json",
            success: function (data) {
                $("tbody tr").remove();
                creatTable(data.books);
                creatPage(data.page);
            }
        });
    };

    //创建方法体
    function creatTable(data) {
        for (let i = 0; i < data.length; i++) {
            let newRow = $("<tr>");
            newRow.append($("<td class='bookId' style='display: none'>").text(data[i].bookId));
            newRow.append($("<td class='bookNum'>").text(data[i].bookNum));
            newRow.append($("<td class='bookName'>").text(data[i].bookName));
            newRow.append($("<td class='bookWriter'>").text(data[i].bookWriter));
            newRow.append($("<td class='bookType'>").text(data[i].bookType));
            newRow.append($("<td class='bookPrice'>").text(data[i].bookPrice));
            newRow.append($("<td class='bookIn'>").text(data[i].bookIn));
            let newTd = $("<td>");
            newTd.append($("<input class='updateBook' type='submit' value='修改'>"));
            newTd.append($("<input class='deleteBook' type='submit' value='删除'>"));
            newRow.append(newTd);
            $("#myTable").append(newRow);
        }
    }

    //创建分页
    function creatPage(data){
        console.log(data)
        let newRow = $("<tr>");
        let newTd = $("<td>");
        newTd.text("总条数:"+data.total);
        newRow.append(newTd);
        $("#myTable").append(newRow);
        if (data.hasNextPage == true) {
            newTd.append("<button class='next'>下一页</buttom>")
        }
        if (data.hasPreviousPage == true) {
            newTd.append("<button class='previous'>上一页</buttom>")
        }
    }
</script>
</html>
